<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>安全保护区在线审查系统</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link
      rel="stylesheet"
      href="../../layuiadmin/layui/css/layui.css"
      vmedia="all"
    />
    <link
      rel="stylesheet"
      href="../../layuiadmin/style/console.css"
      media="all"
    />
  </head>

  <body>
    <div class="layui-row">
      <div class="personalCenter">个人中心</div>
    </div>

    <div class="layui-row" style="margin-top: 20px">
      <hr class="layui-border-blue" />
    </div>

    <!-- <div class="layui-row">
    <div class="layui-col-xs12">131  </div>
  </div> -->
    <div class="layui-row" style="margin-top: 20px">
      <form class="layui-form" action="" style="margin-left: 25px">
        <div class="layui-form-item">
          <label class="layui-form-label">登录账号：</label>
          <div class="layui-input-block layui-input-space">
            <!--disabled-->
            <input
              id="name"
              type="text"
              name="usernumber"
              required
              lay-verify="required"
              autocomplete="off"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"
            ><span style="color: #f21010; font-size: 19px">*</span
            >用户姓名：</label
          >
          <div class="layui-input-block">
            <input
              id="username"
              type="text"
              name="name"
              required
              lay-verify="required"
              placeholder="请输入用户姓名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"
            ><span style="color: #f21010; font-size: 19px">*</span
            >用户手机：</label
          >
          <div class="layui-input-block">
            <input
              id="phone"
              type="text"
              name="phone"
              required
              lay-verify="required|phone"
              placeholder="请输入用户手机号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮件：</label>
          <div class="layui-input-block">
            <input
              id="email"
              type="text"
              name="email"
              placeholder="请输入用户邮件"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">修改密码</label>
          <div class="layui-input-block">
            <input
            type="radio"
            name="code"
            value="0"
            title="否"
            checked=""
            lay-filter="testRadio"
          />
            <input
              type="radio"
              name="code"
              value="1"
              title="是"
              
              lay-filter="testRadio"
            />

          </div>
        </div>

        <div id="contents" class="deedeee" style="display:none">
          <div class="layui-form-item">
            <label class="layui-form-label">修改密码：</label>
            <div class="layui-input-block">
              <input
                id="password1"
                type="password"
                name="password1"
                placeholder="请输入需要修改的密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">确认密码：</label>
            <div class="layui-input-block">
              <input
                id="password2"
                type="password"
                name="password2"
                placeholder="请再次输入密码确认"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">修改头像：</label>
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="test1">
                上传图片
              </button>
              <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" />
                <p id="demoText"></p>
              </div>
              <div style="width: 95px">
                <div
                  class="layui-progress layui-progress-big"
                  lay-showpercent="yes"
                  lay-filter="demo"
                >
                  <div class="layui-progress-bar" lay-percent=""></div>
                </div>
              </div>
            </div>

            <a name="list-progress"> </a>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button
              class="layui-btn layui-btn-normal"
              lay-submit
              lay-filter="formDemoed"
            >
              立即提交
            </button>
            <!-- <button type="reset" class="layui-btn layui-btn-warm layui-btn-primary">立即重置</button> -->
          </div>
        </div>
      </form>
    </div>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/const_config.js"></script>
    <script src="../../layuiadmin/modules/jTools.js"></script>
    <script>
      layui.use(["upload", "element", "layer"], function () {
        var $ = layui.jquery,
          upload = layui.upload,
          element = layui.element,
          layer = layui.layer;

        var username = jTools.getQuery("no");
        //自定义验证规则
        personalCenter();
        function personalCenter() {
          $.ajax({
            type: "post",
            async: true, //异步执行
            url: base_url + "/user/queryPersonalCenter",
            headers: {
              Accept: "application/json; charset=utf-8",
              Authorization: layui.sessionData("userToken").key,
            },
            contentType: "application/json",
            data: JSON.stringify({
              username: username,
            }),
            success: function (data) {
              if (data.code == "200") {
                $("#name").val(data.data.userNumber);
                $("#username").val(data.data.username);
                $("#phone").val(data.data.phone);
                $("#email").val(data.data.email);
                $("#password1").val();
                $("#password2").val();
              } else {
                layer.msg(data.message, { icon: 2 });
              }
            },
          });
          return false; // 这段很关键
        }

        var form = layui.form;

        //监听提交
        form.on("submit(formDemoed)", function (data) {
          // 判断是否修改密码
          if (data.field.code == 1) {
            if (data.field.password1 != data.field.password2) {
              layer.msg("两次输入密码不正确请重新输入", { icon: 2 });
              return false;
            }
          } else {
            $("#password1").val();
            $("#password2").val();
          }
          $.ajax({
            url: base_url + "/user/updatePersonalCenter",
            type: "post",
            headers: {
              Accept: "application/json; charset=utf-8",
              Authorization: layui.sessionData("userToken").key,
            },
            data: data.field,
            success: function (data) {
              debugger;
              if (data.code == "200") {
                //修改密码之外的数据
                if (data.data == "1") {
                  layer.msg(data.message, { icon: 1 });
                } else {
                  window.top.location.href = "./login.html"; //登录页
                  layer.msg(data.message, { icon: 1 });
                }
              } else {
                layer.msg(data.message, { icon: 2 });
              }
            },
          });
          return false; // 这段很关键
        });

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
          elem: "#test1",
          url: base_url + "/user/updatePersonalCenter",
          before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
              $("#demo1").attr("src", result); //图片链接（base64）
            });
            this.data = {
              usernumber: username,
            };
            element.progress("demo", "0%"); //进度条复位
            layer.msg("上传中", { icon: 16, time: 0 });
          },
          done: function (res) {
            //如果上传失败
            if (res.code == "500") {
              return layer.msg("上传失败");
            }
            if (res.code == "200") {
              return layer.msg("图片上传成功");
            }
            //上传成功的一些操作
            //……
            $("#demoText").html(""); //置空上传失败的状态
          },
          error: function () {
            //演示失败状态，并实现重传
            var demoText = $("#demoText");
            demoText.html(
              '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
            );
            demoText.find(".demo-reload").on("click", function () {
              uploadInst.upload();
            });
          },
          //进度条
          progress: function (n, elem, e) {
            element.progress("demo", n + "%"); //可配合 layui 进度条元素使用
            // if (n == 100) {
            //   layer.msg('上传完毕', { icon: 1 });
            // }
          },
        });

        //判断是否进行修改密码
        form.on("radio(testRadio)", function (data) {
          // debugger;
          if (data.value == "1") {
            $(".layui-form .deedeee").css("display", "block");
          } else {
            $(".layui-form .deedeee").css("display", "none");
          }
        });
      });
    </script>
  </body>
</html>
